<template>
  <div id="dictAddAndEditTable">
    <div class="div">
      <el-form ref="dictForm" :model="dictForm" label-width="80px" class="selectForm" :rules="rules">

        <el-row :gutter="24">
          <el-col :span="12">

            <el-form-item label="字典名称" prop="dictName">
              <el-input v-model="dictForm.dictName" placeholder="字典名称" />
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="排序" prop="orderBy">
              <el-input v-model="dictForm.orderBy" placeholder="排序"/>
            </el-form-item>
          </el-col>

        </el-row>

        <el-row :gutter="24">

          <el-col :span="12">
            <el-form-item label="字典编码" prop="dictCode">
              <el-input v-model="dictForm.dictCode" placeholder="字典编码"/>
            </el-form-item>
          </el-col>
          
          <el-col :span="12">
            <el-form-item label="值" prop="dictValue">
              <el-input v-model="dictForm.dictValue" placeholder="值" />
            </el-form-item>
          </el-col>

        </el-row>

        <el-form-item label="备注" style="margin-top: 4vh">
          <el-input
            type="textarea"
            :autosize="{ minRows: 4, maxRows: 6}"
            v-model="dictForm.remark"
            show-word-limit>
          </el-input>
        </el-form-item>

        <el-row :gutter="24">
          <el-col :span="24" style="text-align:right">
            <el-form-item> 
              <el-button type="primary" @click="onSubmit('dictForm')">提交</el-button>
              <el-button type="warning" @click="onReset('dictForm')">重置</el-button>
              <el-button @click="onReturn">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>

      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  name: "dictAddAndEditTable",
  props: ["dictInfo"],
  data() {
    return {
      dictForm : {},
      rules: {
        dictName: [
          { required: true, message: '请输入字典名称', trigger: 'blur' },
        ],
        dictCode: [
          { required: true, message: '请输入字典编码', trigger: 'blur' },
        ],
        dictValue: [
          { required: true, message: '请输入值', trigger: 'blur' },
        ],
        orderBy: [
          { required: true, message: '请输入排序', trigger: 'blur' },
        ]
      }
    }
  },
  methods: {
   onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if(valid){
          this.$emit("submitDictInfo",this.dictForm);
        } 
      }) 
    },
    onReset(formName) {
      this.$refs[formName].resetFields()
    },
    onReturn() {
      this.$router.go(-1)
    },
  },
  watch: {
    dictInfo : {
      handler(newValue) {
        this.dictForm = newValue
      }
    }
  }
}
</script>

<style lang="scss" scoped>

.div {
  width: 50vw;
}

.selectForm /deep/ .el-form-item__label {
  font-size: 12px;
}

.el-form-item{
  margin-bottom: 0px;
}

.el-input /deep/ .el-input__inner{ 
  height: 32px;
  font-size: 13px;
  box-shadow: none;
  border: 1px solid #e9e9e9;
}

.el-row >>> .el-col {
  margin-top: 5vh;
}

.el-button {
  line-height: 0px;
  height: 32px;
  padding: 12px;
  font-size: 2px;
  border-radius: 20px;
}


</style>
